/*
 * @Author: Swance
 * @Date: 2023-12-16
 * @Description: 右键菜单
 */
import { IContextMenu, IContextMenuItem } from '@/types/global';
import '@/styles/contextMenu.scss';
type func = (e?: any) => void;

class ContextMenu {
  container: HTMLElement;
  dom: HTMLElement | null;
  show: boolean;
  menuItems: Array<IContextMenuItem>;
  _onclick: func;
  _onblur: func;
  _oncontextmenu: func;
  _oncontextmenu_keydown: func;

  constructor(container: HTMLElement, menuItems: Array<IContextMenuItem>) {
    this.container = container;
    this.dom = null;
    this.show = false;
    this.menuItems = menuItems;

    // 失焦隐藏右键菜单的回调函数
    this._onclick = (e: any) => {
      if (
        this.dom &&
        e.target != this.dom &&
        !e.target?.classList.contains('p-editor-canvas__context-menu-item')
      ) {
        this.hide();
      }
    };

    this._onblur = () => {
      this.hide();
    };

    // 触发右键菜单的回调函数
    this._oncontextmenu = (e: any) => {
      e.preventDefault();
      if (
        e.target != this.dom &&
        e.target?.classList.contains('p-editor-canvas__context-menu-item')
      ) {
        this.hide();
        this.showContextMenu(e.clientX, e.clientY);
      }
    };

    // 通过鼠标右键触发右键菜单
    this._oncontextmenu_keydown = (e: any) => {
      if (e.keyCode != 93) return;
      e.preventDefault();
      this.hide();
      this.showContextMenu(e.clientX, e.clientY);
    };
  }

  // 渲染菜单项
  menuItemsToDomEl(menuItem: IContextMenuItem) {
    if (menuItem.disabled) return;
    const item = document.createElement('div');
    item.classList.add('p-editor-canvas__context-menu-item');

    const label = document.createElement('span');
    label.classList.add('p-editor-canvas__context-menu-item__label');
    label.innerText = menuItem.text || '';
    item.appendChild(label);

    const hotkeys = document.createElement('span');
    hotkeys.classList.add('p-editor-canvas__context-menu-item__hotkey');
    hotkeys.innerText = menuItem.hotkey?.toString() || '';
    item.appendChild(hotkeys);

    item.addEventListener('click', () => {
      menuItem.onclick();
      this.hide();
    });

    return item;
  }

  // 获取右键菜单DOM元素
  getMenuDom() {
    const menu = document.createElement('div');
    menu.classList.add('p-editor-canvas__context-menu');
    this.menuItems.forEach((item) => {
      const menuItem = this.menuItemsToDomEl(item);
      if (menuItem) {
        menu.appendChild(menuItem);
      }
    });

    return menu;
  }

  // 隐藏右键菜单
  hide() {
    if (this.dom && this.show) {
      this.show = false;
      this.container.removeChild(this.dom);
    }
  }

  // 显示右键菜单
  showContextMenu(x: number, y: number) {
    this.dom = this.getMenuDom();
    this.dom.style.left = `${x}px`;
    this.dom.style.top = `${y}px`;
    this.show = true;
    this.container.appendChild(this.dom);
  }

  // 设置右键菜单数据
  setMenuItems(menuItems: IContextMenu) {
    this.menuItems = menuItems;
  }

  // 为白板编辑器注册事件
  install() {
    this.container.addEventListener('contextmenu', this._oncontextmenu);
    this.container.addEventListener('keydown', this._oncontextmenu_keydown);
    this.container.addEventListener('click', this._onclick);
    window.addEventListener('blur', this._onblur);
  }

  //  注销白板事件
  uninstall() {
    this.dom = null;
    this.container.removeEventListener('keydown', this._oncontextmenu_keydown);
    this.container.removeEventListener('click', this._onclick);
    window.removeEventListener('blur', this._onblur);
  }
}

export default ContextMenu;
